<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易云音乐</title>
    <meta name="keywords" content="网易云音乐，音乐，播放器，网易，下载，播放，DJ，免费，明星，精选，歌单，识别音乐，收藏，分享音乐，音乐互动，高音质，320K，音乐社交，官网，music.163.com" />
<meta name="description" content="网易云音乐是一款专注于发现与分享的音乐产品，依托专业音乐人、DJ、好友推荐及社交功能，为用户打造全新的音乐生活。" />
<link rel="stylesheet" href="../网易云首页/css/css.css">
<link rel="shortcut icon" href="../网易云首页/小图标ico/tBTNafgjNnTL1KlZMt7lVA==_18885211718935735"  type="image/x-icon"/>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>  
       <!-- 登录注册      -->
       <div  id="demo"><span class="dompan">x</span>
        <iframe class="iflo" src="../music/login/Login.html" frameborder="0"></iframe>
    </div>   


    <div class="title">
        <div class="title-up">
            <div class="title-upcenter">
                <a href="#" class="alink1"></a>
                <ul class="upcenterul">
                    <li id="firstli"><a href="#">发现音乐<span class="deg"></span></a></li>
                    <li><a href="#">我的音乐</a></li>
                    <li id="frined"><a href="#">朋友</a></li>
                    <li id="frined"><a href="../网易云商城界面/网易云商城.html">商城</a></li>
                    <li id="limusic"><a href="#">音乐人</a></li>
                    <li  id="lastli"><a href="#">下载客户端</a><span class="hot"></span></li>
                </ul>
                <div class="search">
                    <span></span>
                    <input type="text" placeholder="音乐/视频/电台/用户">
                </div>
                <a href="#" id="author">创作者中心</a>
                <div class="signin">
                    <a href="#" id="sign">登录</a>
                </div>
            </div>
        </div>
        <div class="title-down">
            <div class="title-downcenter">
                <ul class="downcenterul">
                    <li><a href="#"><em id="eeemmm">推荐</em></a></li>
                    <li id="downli2"><a href="#"><em>排行榜</em></a></li>
                    <li><a href="#"><em>歌单®</em></a></li>
                    <li id="downli4"><a href="#"><em>主播电台</em></a></li>
                    <li><a href="#"><em>歌手</em></a></li>
                    <li id="downlast"><a href="#"><em>新碟上架</em></a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="rotation" id="background">
        <div class="rotationcenter">
            <div class="bigimg">
                <a href="#" id="abig">
                    <img src="../网易云首页/轮播图/1.jpg" alt="" style="display: block;">
                    <img src="../网易云首页/轮播图/2.jpg" alt="">
                    <img src="../网易云首页/轮播图/3.jpg" alt="">
                    <img src="../网易云首页/轮播图/4.jpg" alt="">
                    <img src="../网易云首页/轮播图/5.jpg" alt="">
                    <img src="../网易云首页/轮播图/6.jpg" alt="">
                    <img src="../网易云首页/轮播图/7.jpg" alt="">
                    <img src="../网易云首页/轮播图/8.jpg" alt="">
                    <img src="../网易云首页/轮播图/9.jpg" alt="">
                    <img src="../网易云首页/轮播图/10.jpg" alt="">
                </a>
                <div class="bigright">
                    <img src="../网易云首页/精灵图/download.png" alt="">
                    <a href="#" id="download"></a>
                    <p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
                </div>
                <div id="btns">
                    <span id="current"></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
            <button id="prev"></button>
            <button id="next"></button>
        </div>

    </div>
    <div class="imp">
        <div class="txt">
            <div class="txtleft">
                <div class="textup">
                    <div class="navtext">
                        <a href="#" id="hot">热门推荐</a>
                        <div class="list">
                            <a href="#">华语</a>
                            <span>|</span>
                            <a href="#">流行</a>
                            <span>|</span>
                            <a href="#">摇滚</a>
                            <span>|</span>
                            <a href="#">民谣</a>
                            <span>|</span>
                            <a href="#">电子</a>
                        </div>
                        <span class="more">
                            <a href="#">更多</a>
                            <span></span>
                        </span>
                    </div>
                    <ul class="txtul">
                        <li>
                            <div>
                                <a class="atext" title="[华语速爆新歌] 蔡健雅 x 王源远程合作《在哪里都很好》" href="#">
                                    <img src="../网易云首页/歌单img/109951165455900633.jpg" alt="">
                                </a>
                               <div class="lititle">
                                <a href="#"></a>
                                <span class="lititlespan"></span>
                                <span class="spantext">95316万</span>
                               </div>
                            </div>
                            <p>
                                <a title="[华语速爆新歌] 蔡健雅 x 王源远程合作《在哪里都很好》" href="#">
                                    [华语速爆新歌] 蔡健雅 x 王源远程合作《在哪里都很好》
                                    </a>
                            </p>
                        </li>
                        <li>
                            <div>
                                <a class="atext" title="2020百大DJ排行榜" href="#">
                                    <img src="../网易云首页/歌单img/2.jpg" alt="">
                                </a>
                               <div class="lititle">
                                <a href="#"></a>
                                <span class="lititlespan"></span>
                                <span class="spantext">24万</span>
                               </div>
                            </div>
                            <p>
                                <a title="2020百大DJ排行榜" href="#">
                                    2020百大DJ排行榜
                                    </a>
                            </p>
                        </li>
                        <li>
                            <div>
                                <a class="atext" title="爱上你，需要踏遍山河的勇气" href="#">
                                    <img src="../网易云首页/歌单img/3.jpg" alt="">
                                </a>
                               <div class="lititle">
                                <a href="#"></a>
                                <span class="lititlespan"></span>
                                <span class="spantext">121万</span>
                               </div>
                            </div>
                            <p>
                                <a title="爱上你，需要踏遍山河的勇气" href="#">
                                    爱上你，需要踏遍山河的勇气
                                    </a>
                            </p>
                        </li>
                        <li>
                            <div>
                                <a class="atext" title="《跨次元新星》：是“跨次元喜剧人”还是“程序员101”？" href="#">
                                    <img src="../网易云首页/歌单img/4.jpg" alt="">
                                </a>
                               <div class="lititle">
                                <a href="#"></a>
                                <span class="lititlespan"></span>
                                <span class="spantext">127</span>
                               </div>
                            </div>
                            <p>
                                
                                <a class="atex" title="《跨次元新星》：是“跨次元喜剧人”还是“程序员101”？" href="#">
                                    <i class="pi"></i>
                                    《跨次元新星》：是“跨次元喜剧人”还是“程序员101”？
                                    </a>
                            </p>
                        </li>
                        <li>
                            <div>
                                <a class="atext" title="[聚精会神] 学习工作必备的背景音乐" href="#">
                                    <img src="../网易云首页/歌单img/5.jpg" alt="">
                                </a>
                               <div class="lititle">
                                <a href="#"></a>
                                <span class="lititlespan"></span>
                                <span class="spantext">3854万</span>
                               </div>
                            </div>
                            <p>
                                <a title="[聚精会神] 学习工作必备的背景音乐" href="#">
                                    [聚精会神] 学习工作必备的背景音乐
                                    </a>
                            </p>
                        </li>
                        <li>
                            <div>
                                <a class="atext" title="【猫猫脱口秀】如果你穿越了，你选择尊重历史还是改变历史？" href="#">
                                    <img src="../网易云首页/歌单img/6.jpg" alt="">
                                </a>
                               <div class="lititle">
                                <a href="#"></a>
                                <span class="lititlespan"></span>
                                <span class="spantext">39331</span>
                               </div>
                            </div>
                            <p>
                                
                                <a class="atex" title="【猫猫脱口秀】如果你穿越了，你选择尊重历史还是改变历史？" href="#">
                                    <i class="pi"></i>
                                    【猫猫脱口秀】如果你穿越了，你选择尊重历史还是改变历史？
                                    </a>
                            </p>
                        </li>
                        <li>
                            <div>
                                <a class="atext" title="不用考虑我 我没感受" href="#">
                                    <img src="../网易云首页/歌单img/7.jpg" alt="">
                                </a>
                               <div class="lititle">
                                <a href="#"></a>
                                <span class="lititlespan"></span>
                                <span class="spantext">350万</span>
                               </div>
                            </div>
                            <p>
                                <a title="不用考虑我 我没感受" href="#">
                                    不用考虑我 我没感受
                                    </a>
                            </p>
                        </li>
                        <li>
                            <div>
                                <a class="atext" title="《云与海》王巨星 （阿yueyue）" href="#">
                                    <img src="../网易云首页/歌单img/8.jpg" alt="">
                                </a>
                               <div class="lititle">
                                <a href="#"></a>
                                <span class="lititlespan"></span>
                                <span class="spantext">124万</span>
                               </div>
                            </div>
                            <p>
                                
                                <a class="atex" title="《云与海》王巨星 （阿yueyue）" href="#">
                                    <i class="pi"></i>
                                    《云与海》王巨星 （阿yueyue）
                                    </a>
                            </p>
                        </li>
                    </ul> 
                </div>
                <div class="line"></div>
                <div class="new">
                    <div class="navtext">
                        <a href="#" id="hot">新碟上架</a>
                        <span class="more">
                            <a href="#">更多</a>
                            <span></span>
                        </span>
                    </div>
                    <div class="newdown">
                        <div class="gundong">
                            <a  href="javascript:void(0)" class="gundongleft"></a>
                            <div class="gunimp">
                                <ul class="ul1">
                                    <li>
                                        <div class="rollimg">
                                            <img src="../网易云首页/滚动条/1.jpg" alt="">
                                            <a title="AZORAland·我是尤长靖" class="rolla" href="#"></a>
                                            <a class="lia" href="#"></a>
                                        </div>
                                        <p title="AZORAland·我是尤长靖">
                                            <a class="colora" href="#">AZORAland·我是尤长靖</a>
                                        </p>
                                        <p title="尤长靖">
                                            <a class="coloraa" href="#">尤长靖</a>
                                        </p>
                                    </li>
                                    <li>
                                        <div class="rollimg">
                                            <img src="../网易云首页/滚动条/2.jpg" alt="">
                                            <a title="致明日的舞" class="rolla" href="#"></a>
                                            <a class="lia" href="#"></a>
                                        </div>
                                        <p title="致明日的舞">
                                            <a class="colora" href="#">致明日的舞</a>
                                        </p>
                                        <p title="陈奕迅">
                                            <a class="coloraa" href="#">陈奕迅</a>
                                        </p>
                                    </li>
                                    <li>
                                        <div class="rollimg">
                                            <img src="../网易云首页/滚动条/3.jpg" alt="">
                                            <a title="REVISIT" class="rolla" href="#"></a>
                                            <a class="lia" href="#"></a>
                                        </div>
                                        <p title="REVISIT">
                                            <a class="colora" href="#">REVISIT</a>
                                        </p>
                                        <p title="张国荣">
                                            <a class="coloraa" href="#">张国荣</a>
                                        </p>
                                    </li>
                                    <li>
                                        <div class="rollimg">
                                            <img src="../网易云首页/滚动条/4.jpg" alt="">
                                            <a title="Lonely" class="rolla" href="#"></a>
                                            <a class="lia" href="#"></a>
                                        </div>
                                        <p title="Lonely">
                                            <a class="colora" href="#">Lonely</a>
                                        </p>
                                        <p title="Justin Bieber / Benny Blanco">
                                            <a class="coloraa" href="#">Justin Bieber / Benny Blanco</a>
                                        </p>
                                    </li>
                                    <li>
                                        <div class="rollimg">
                                            <img src="../网易云首页/滚动条/5.jpg" alt="">
                                            <a title="彩券" class="rolla" href="#"></a>
                                            <a class="lia" href="#"></a>
                                        </div>
                                        <p title="彩券">
                                            <a class="colora" href="#">彩券</a>
                                        </p>
                                        <p title="薛之谦">
                                            <a class="coloraa" href="#">薛之谦</a>
                                        </p>
                                    </li>
                                </ul>
                                <ul class="ul2">
                                    <li>
                                        <div class="rollimg">
                                            <img src="../网易云首页/滚动条/6.jpg" alt="">
                                            <a title="不完美人生指南" class="rolla" href="#"></a>
                                            <a class="lia" href="#"></a>
                                        </div>
                                        <p title="不完美人生指南">
                                            <a class="colora" href="#">不完美人生指南</a>
                                        </p>
                                        <p title="陈绮贞 / 鬼卞 / 周深 / 王子 / A-Lin / 倪子冈 / 刘若英 / 柯智棠 / 毛不易 / 祁紫檀 / 徐佳莹 / HUSH / 蔡健雅 / 王源 / 莫文蔚 / 郭一凡 / 魏如萱 / 许光汉 / 苏运莹 / 岑宁儿 / 艾怡良 / Matzka玛斯卡 / 马思唯 / NINEONE#">
                                            <a class="coloraa" href="#">陈绮贞 / 鬼卞 / 周深 / 王子 / A-Lin / 倪子冈 / 刘若英 / 柯智棠 / 毛不易 / 祁紫檀 / 徐佳莹 / HUSH / 蔡健雅 / 王源 / 莫文蔚 / 郭一凡 / 魏如萱 / 许光汉 / 苏运莹 / 岑宁儿 / 艾怡良 / Matzka玛斯卡 / 马思唯 / NINEONE#</a>
                                        </p>
                                    </li>
                                    <li>
                                        <div class="rollimg">
                                            <img src="../网易云首页/滚动条/7.jpg" alt="">
                                            <a title="NANA II" class="rolla" href="#"></a>
                                            <a class="lia" href="#"></a>
                                        </div>
                                        <p title="NANA II">
                                            <a class="colora" href="#">NANA II</a>
                                        </p>
                                        <p title="欧阳娜娜">
                                            <a class="coloraa" href="#">欧阳娜娜</a>
                                        </p>
                                    </li>
                                    <li>
                                        <div class="rollimg">
                                            <img src="../网易云首页/滚动条/8.jpg" alt="">
                                            <a title="Positions" class="rolla" href="#"></a>
                                            <a class="lia" href="#"></a>
                                        </div>
                                        <p title="Positions">
                                            <a class="colora" href="#">Positions</a>
                                        </p>
                                        <p title="Ariana Grande">
                                            <a class="coloraa" href="#">Ariana Grande</a>
                                        </p>
                                    </li>
                                    <li>
                                        <div class="rollimg">
                                            <img src="../网易云首页/滚动条/9.jpg" alt="">
                                            <a title="你" class="rolla" href="#"></a>
                                            <a class="lia" href="#"></a>
                                        </div>
                                        <p title="你">
                                            <a class="colora" href="#">你</a>
                                        </p>
                                        <p title="黄子韬">
                                            <a class="coloraa" href="#">黄子韬</a>
                                        </p>
                                    </li>
                                    <li>
                                        <div class="rollimg">
                                            <img src="../网易云首页/滚动条/10.jpg" alt="">
                                            <a title="幸存者 Drifter" class="rolla" href="#"></a>
                                            <a class="lia" href="#"></a>
                                        </div>
                                        <p title="幸存者 Drifter">
                                            <a class="colora" href="#">幸存者 Drifter</a>
                                        </p>
                                        <p title="林俊杰">
                                            <a class="coloraa" href="#">林俊杰</a>
                                        </p>
                                    </li>
                                </ul>
                            </div>
                            <a  href="javascript:void(0)" class="gundongright"></a>
                        </div>
                    </div>
                </div>
                <div class="listmusic">
                    <div class="navtext">
                        <a href="#" id="hot">榜单</a>
                        <span class="more">
                            <a href="#">更多</a>
                            <span></span>
                        </span>
                    </div>
                    <div class="listtext">
                        <dl class="dlone">
                            <dt>
                                <div class="shaw">
                                    <div class="shadow">
                                        <a href="#" title="云音乐飙升榜"></a>
                                        <img src="../网易云首页/榜单/飙升榜.jpg" width="80" height="80" alt="">
                                    </div> 
                                </div>
                                <div class="divtext">
                                    <a href="#" title="云音乐飙升榜">
                                        <h3>云音乐飙升榜</h3>
                                    </a>
                                    <div class="icon">
                                        <a class="ico1" href="#" title="播放"></a>
                                        <a href="#" class="ico2" title="收藏"></a>
                                    </div>
                                </div>
                            </dt>
                            <dd class="dd1">
                                <ol>
                                    <li>
                                        <span class="span1">1</span>
                                        <a class="hers" href="#" title="嘻哈帝国 (Empire)">嘻哈帝国 (Empire)</a>
                                        <div class="font">
                                            <a class="font1" href="#"></a>
                                            <a class="font2" href="#"></a>
                                            <a class="font3" href="#"></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="span1">2</span>
                                        <a class="hers" href="#" title="我很好（吉他版）">我很好（吉他版）</a>
                                        <div class="font">
                                            <a class="font1" href="#"></a>
                                            <a class="font2" href="#"></a>
                                            <a class="font3" href="#"></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="span1">3</span>
                                        <a class="hers" href="#" title="每天的不理想">每天的不理想</a>
                                        <div class="font">
                                            <a class="font1" href="#"></a>
                                            <a class="font2" href="#"></a>
                                            <a class="font3" href="#"></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="span2">4</span>
                                        <a class="hers" href="#" title="MAGO">MAGO</a>
                                        <div class="font">
                                            <a class="font1" href="#"></a>
                                            <a class="font2" href="#"></a>
                                            <a class="font3" href="#"></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="span2">5</span>
                                        <a class="hers" href="#" title="世界上不存在的歌 (2020重唱版)">世界上不存在的歌 (2020重唱版)</a>
                                        <div class="font">
                                            <a class="font1" href="#"></a>
                                            <a class="font2" href="#"></a>
                                            <a class="font3" href="#"></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="span2">6</span>
                                        <a class="hers" href="#" title="窥光">窥光</a>
                                        <div class="font">
                                            <a class="font1" href="#"></a>
                                            <a class="font2" href="#"></a>
                                            <a class="font3" href="#"></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="span2">7</span>
                                        <a class="hers" href="#" title="你我之间">你我之间</a>
                                        <div class="font">
                                            <a class="font1" href="#"></a>
                                            <a class="font2" href="#"></a>
                                            <a class="font3" href="#"></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="span2">8</span>
                                        <a class="hers" href="#" title="回不去">回不去</a>
                                        <div class="font">
                                            <a class="font1" href="#"></a>
                                            <a class="font2" href="#"></a>
                                            <a class="font3" href="#"></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="span2">9</span>
                                        <a class="hers" href="#" title="爱你没道理">爱你没道理</a>
                                        <div class="font">
                                            <a class="font1" href="#"></a>
                                            <a class="font2" href="#"></a>
                                            <a class="font3" href="#"></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="span2">10</span>
                                        <a class="hers" href="#" title="夏夜最后的烟火">夏夜最后的烟火</a>
                                        <div class="font">
                                            <a class="font1" href="#"></a>
                                            <a class="font2" href="#"></a>
                                            <a class="font3" href="#"></a>
                                        </div>
                                    </li>
                                </ol>
                                <div class="like">
                                    <a href="#">查看全部></a>
                                </div>
                            </dd>
                        </dl>
                        <dl class="dlone">
                            <dt>
                                <div class="shaw">
                                    <div class="shadow">
                                        <a href="#" title="云音乐新歌榜"></a>
                                        <img src="../网易云首页/榜单/新歌榜.jpg" width="80" height="80" alt="">
                                    </div>  
                                </div>
                                <div class="divtext">
                                    <a href="#" title="云音乐新歌榜">
                                        <h3>云音乐新歌榜</h3>
                                    </a>
                                    <div class="icon">
                                        <a class="ico1" href="#" title="播放"></a>
                                        <a href="#" class="ico2" title="收藏"></a>
                                    </div>
                                </div>
                            </dt>
                            <dd class="dd1">
                                <ol>
                                    <li>
                                        <span class="span1">1</span>
                                        <a class="hers" href="#" title="经济舱 (Live)">经济舱 (Live)</a>
                                        <div class="font">
                                            <a class="font1" href="#"></a>
                                            <a class="font2" href="#"></a>
                                            <a class="font3" href="#"></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="span1">2</span>
                                        <a class="hers" href="#" title="经济舱">经济舱</a>
                                        <div class="font">
                                            <a class="font1" href="#"></a>
                                            <a class="font2" href="#"></a>
                                            <a class="font3" href="#"></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="span1">3</span>
                                        <a class="hers" href="#" title="我很好（吉他版）">我很好（吉他版）</a>
                                        <div class="font">
                                            <a class="font1" href="#"></a>
                                            <a class="font2" href="#"></a>
                                            <a class="font3" href="#"></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="span2">4</span>
                                        <a class="hers" href="#" title="会不会（正式版）">会不会（正式版）</a>
                                        <div class="font">
                                            <a class="font1" href="#"></a>
                                            <a class="font2" href="#"></a>
                                            <a class="font3" href="#"></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="span2">5</span>
                                        <a class="hers" href="#" title="嘻哈帝国 (Empire)">嘻哈帝国 (Empire)</a>
                                        <div class="font">
                                            <a class="font1" href="#"></a>
                                            <a class="font2" href="#"></a>
                                            <a class="font3" href="#"></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="span2">6</span>
                                        <a class="hers" href="#" title="一花一剑">一花一剑</a>
                                        <div class="font">
                                            <a class="font1" href="#"></a>
                                            <a class="font2" href="#"></a>
                                            <a class="font3" href="#"></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="span2">7</span>
                                        <a class="hers" href="#" title="彩券">彩券</a>
                                        <div class="font">
                                            <a class="font1" href="#"></a>
                                            <a class="font2" href="#"></a>
                                            <a class="font3" href="#"></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="span2">8</span>
                                        <a class="hers" href="#" title="执迷不悟 (DJ版)">执迷不悟 (DJ版)</a>
                                        <div class="font">
                                            <a class="font1" href="#"></a>
                                            <a class="font2" href="#"></a>
                                            <a class="font3" href="#"></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="span2">9</span>
                                        <a class="hers" href="#" title="唯一 (prod.gc)">唯一 (prod.gc)</a>
                                        <div class="font">
                                            <a class="font1" href="#"></a>
                                            <a class="font2" href="#"></a>
                                            <a class="font3" href="#"></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="span2">10</span>
                                        <a class="hers" href="#" title="在哪里都很好">在哪里都很好</a>
                                        <div class="font">
                                            <a class="font1" href="#"></a>
                                            <a class="font2" href="#"></a>
                                            <a class="font3" href="#"></a>
                                        </div>
                                    </li>
                                </ol>
                                <div class="like">
                                    <a href="#">查看全部></a>
                                </div>
                            </dd>
                        </dl>
                        <dl class="dlone" style="float: left;">
                            <dt>
                                <div class="shaw">
                                    <div class="shadow">
                                        <a href="#" title="网易原创歌曲榜"></a>
                                        <img src="../网易云首页/榜单/原创榜.jpg" width="80" height="80" alt="">
                                    </div> 
                                </div>
                                <div class="divtext">
                                    <a href="#" title="网易原创歌曲榜">
                                        <h3>网易原创歌曲榜</h3>
                                    </a>
                                    <div class="icon">
                                        <a class="ico1" href="#" title="播放"></a>
                                        <a href="#" class="ico2" title="收藏"></a>
                                    </div>
                                </div>
                            </dt>
                            <dd class="dd1">
                                <ol>
                                    <li>
                                        <span class="span1">1</span>
                                        <a class="hers" href="#" title="经济舱">经济舱</a>
                                        <div class="font">
                                            <a class="font1" href="#"></a>
                                            <a class="font2" href="#"></a>
                                            <a class="font3" href="#"></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="span1">2</span>
                                        <a class="hers" href="#" title="Soft Storm">Soft Storm</a>
                                        <div class="font">
                                            <a class="font1" href="#"></a>
                                            <a class="font2" href="#"></a>
                                            <a class="font3" href="#"></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="span1">3</span>
                                        <a class="hers" href="#" title="你别管">你别管</a>
                                        <div class="font">
                                            <a class="font1" href="#"></a>
                                            <a class="font2" href="#"></a>
                                            <a class="font3" href="#"></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="span2">4</span>
                                        <a class="hers" href="#" title="多可惜">多可惜</a>
                                        <div class="font">
                                            <a class="font1" href="#"></a>
                                            <a class="font2" href="#"></a>
                                            <a class="font3" href="#"></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="span2">5</span>
                                        <a class="hers" href="#" title="假寐">假寐</a>
                                        <div class="font">
                                            <a class="font1" href="#"></a>
                                            <a class="font2" href="#"></a>
                                            <a class="font3" href="#"></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="span2">6</span>
                                        <a class="hers" href="#" title="我要陪你从午夜到清晨再到黄昏">我要陪你从午夜到清晨再到黄昏</a>
                                        <div class="font">
                                            <a class="font1" href="#"></a>
                                            <a class="font2" href="#"></a>
                                            <a class="font3" href="#"></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="span2">7</span>
                                        <a class="hers" href="#" title="建 一 个 只 有 我 们 的 世 界（The world of us）">建 一 个 只 有 我 们 的 世 界（The world of us）</a>
                                        <div class="font">
                                            <a class="font1" href="#"></a>
                                            <a class="font2" href="#"></a>
                                            <a class="font3" href="#"></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="span2">8</span>
                                        <a class="hers" href="#" title="沾花惹草">沾花惹草</a>
                                        <div class="font">
                                            <a class="font1" href="#"></a>
                                            <a class="font2" href="#"></a>
                                            <a class="font3" href="#"></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="span2">9</span>
                                        <a class="hers" href="#" title="单方面决定">单方面决定</a>
                                        <div class="font">
                                            <a class="font1" href="#"></a>
                                            <a class="font2" href="#"></a>
                                            <a class="font3" href="#"></a>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="span2">10</span>
                                        <a class="hers" href="#" title="我们中的一个（Acoustic）">我们中的一个（Acoustic）</a>
                                        <div class="font">
                                            <a class="font1" href="#"></a>
                                            <a class="font2" href="#"></a>
                                            <a class="font3" href="#"></a>
                                        </div>
                                    </li>
                                </ol>
                                <div class="like">
                                    <a href="#">查看全部></a>
                                </div>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
            <div class="txtright">
                <div class="user">
                    <p>登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
                    <a href="#">用户登录</a>
                </div>
                <div class="singer">
                    <h3>
                        <span>入驻歌手</span>
                        <a href="#">查看全部 ></a>
                    </h3>
                    <ul class="singerul">
                        <li>
                            <a href="#" class="itm">
                                <div class="singerimg">
                                    <img src="../网易云首页/入驻歌手/1.jpg" alt="">
                                </div>
                                <div class="singertext">
                                    <h4>
                                        <span>张惠妹aMEI</span>
                                    </h4>
                                    <p>台湾歌手张惠妹</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="itm">
                                <div class="singerimg">
                                    <img src="../网易云首页/入驻歌手/2.jpg" alt="">
                                </div>
                                <div class="singertext">
                                    <h4>
                                        <span>Fine乐团</span>
                                    </h4>
                                    <p>独立音乐人</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="itm">
                                <div class="singerimg">
                                    <img src="../网易云首页/入驻歌手/3.jpg" alt="">
                                </div>
                                <div class="singertext">
                                    <h4>
                                        <span>萬曉利</span>
                                    </h4>
                                    <p>民谣歌手、中国现代民谣的代表人物之一</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="itm">
                                <div class="singerimg">
                                    <img src="../网易云首页/入驻歌手/4.jpg" alt="">
                                </div>
                                <div class="singertext">
                                    <h4>
                                        <span>音乐人赵雷</span>
                                    </h4>
                                    <p>民谣歌手</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="itm">
                                <div class="singerimg">
                                    <img src="../网易云首页/入驻歌手/5.jpg" alt="">
                                </div>
                                <div class="singertext">
                                    <h4>
                                        <span>王三溥</span>
                                    </h4>
                                    <p>音乐人</p>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="apply">
                    <a href="#">
                        <i>申请成为网易音乐人</i>
                    </a>
                </div>
                <div class="anchor">
                    <h3>热门主播</h3>
                    <ul>
                        <li>
                            <a href="#">
                                <img src="../网易云首页/热门主播/1.jpg" alt="">
                            </a>
                            <div class="anchortext">
                                <p class="name">
                                    <a href="#">陈立</a>
                                    <span></span>
                                </p>
                                <p class="jieshao">心理学家、美食家陈立教授</p>
                            </div>
                        </li>
                        <li>
                            <a href="#">
                                <img src="../网易云首页/热门主播/2.jpg" alt="">
                            </a>
                            <div class="anchortext">
                                <p class="name">
                                    <a href="#">DJ艳秋</a>
                                    <span></span>
                                </p>
                                <p class="jieshao">著名音乐节目主持人</p>
                            </div>
                        </li>
                        <li>
                            <a href="#">
                                <img src="../网易云首页/热门主播/3.jpg" alt="">
                            </a>
                            <div class="anchortext">
                                <p class="name">
                                    <a href="#">国家大剧院古典音乐频道</a>
                                    <span></span>
                                </p>
                                <p class="jieshao">国家大剧院古典音乐官方</p>
                            </div>
                        </li>
                        <li>
                            <a href="#">
                                <img src="../网易云首页/热门主播/4.jpg" alt="">
                            </a>
                            <div class="anchortext">
                                <p class="name">
                                    <a href="#">谢谢收听</a>
                                    <span></span>
                                </p>
                                <p class="jieshao">南京电台主持人王馨</p>
                            </div>
                        </li>
                        <li>
                            <a href="#">
                                <img src="../网易云首页/热门主播/5.jpg" alt="">
                            </a>
                            <div class="anchortext">
                                <p class="name">
                                    <a href="#">DJ晓苏</a>
                                    <span></span>
                                </p>
                                <p class="jieshao">独立DJ，CRI环球旅游广播特邀DJ</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

        </div>

    </div>
    <div class="bottom">
        <div class="bottomtext">
            <div class="bottomleft">
                <p class="p1">
                    <a href="#">服务条款</a>
                    <span>|</span>
                    <a href="#">隐私政策</a>
                    <span>|</span>
                    <a href="#">儿童隐私政策</a>
                    <span>|</span>
                    <a href="#">版权投诉指引</a>
                    <span>|</span>
                    <a href="#">意见反馈</a>
                    <span>|</span>
                </p>
                <p class="p2">
                    <span class="p2-span">网易公司版权所有©1997-2020</span>
                    <span>杭州乐读科技有限公司运营：</span>
                    <a href="#">浙网文[2018]3506-263号</a>
                </p>
                <p class="p2">
                    <span class="p2-span">违法和不良信息举报电话：0571-89853516</span>
                    <span>举报邮箱：</span>
                    <a href="#">ncm5990@163.com</a>
                </p>
                <p class="p2">
                    <span class="p2-span">粤B2-20090191-18</span>
                    <a href="#">工业和信息化部备案管理系统网站</a>
                    <a href="#">
                        <span class="post"></span>
                        <span>浙公网安备 33010902002564号</span>
                    </a>
                </p>
            </div>
            <ul class="bottomright">
                <li>
                    <a href="#"></a>
                    <span></span>
                </li>
                <li>
                    <a id="a1" href="#"></a>
                    <span id="span1"></span>
                </li>
                <li>
                    <a href="#" id="a2"></a>
                    <span id="span2"></span>
                </li>
                <li>
                    <a href="#" id="a3"></a>
                    <span id="span3"></span>
                </li>
                <li>
                    <a href="#" id="a4"></a>
                    <span id="span4"></span>
                </li>
            </ul>
        </div>
    </div>
    <a href="javascript:void(0)"id="fix" class="fix"></a>
    <div class="play">
        <div class="musicplay">
            <div class="playleft">
                <a class="aplay1" href="javascript:void(0)"></a>
                <a class="aplay2" href="javascript:void(0)"></a>
                <a class="aplay3" href="javascript:void(0)"></a>
            </div>
            <div class="playimg">
                <a href="#">
                    <img src="../网易云首页/播放框/default_album.jpg" width="34" height="34" alt="">
                </a>
            </div>
            <div class="lineplay">
                <div class="xiandiv">
                    <span id="circle"></span>
                    <a id="xian" href="#"></a>
                </div>
                <div class="time">
                    <span class="tm1">00:00</span>
                    <span class="tm2">/00:00</span>
                </div>
            </div>
            <div class="shoucang">
                <a class="shou1" href="#"></a>
                <a class="shou2" href="#"></a>
            </div>
            <div class="playlast">
                <a class="lasta1" href="#"></a>
                <a class="lasta2" href="#"></a>
                <a class="lasta3" href="#"></a>
            </div>
        </div>
        <div class="lock">
            <a id="alock" href="javascript:void(0)"></a>
        </div>
    </div>
</body>
<script>
    //登陆注册界面
    $("#sign").click(function () {
        $("#demo").css("display", "inline");
    });
    $(".dompan").click(function () {
        $("#demo").css("display", "none");
    });

    $(".user>a").click(function () {
        $("#demo").css("display", "inline");
    });


    $(function(){
        $(".play").mouseenter(function(){
            $(".play").animate(
                {bottom:"0px"},200)
        }).mouseleave(function(){
            $(".play").animate(
            {bottom:"-47px"},200)
        })
        i=0;
        $("#alock").click(function(){
            i +=1
            if(i%2==0){
                $(this).css("backgroundPosition","-80px -380px"); 
        
            }else{
                $(this).css("backgroundPosition","-100px -400px");
                
            }
        })


        $("ol>li:even").css("backgroundColor","rgb(232,232,232)")
        $("ol>li:odd").css("backgroundColor","rgb(246,246,246)")
        $(".rollimg").mouseenter(function(){
            $(this).children(":last").css("display","block")
            
        }).mouseleave(function(){
            $(this).children(":last").css("display","none")
        })
        let index = 0;
        $("#next").click(function () {
            index++;
            if (index > 9) {
                index = 0;
            }
            animate(300)
        })
        
        $("#prev").click(function () {
            index--;
            if (index < 0) {
                index = 9;
            }
            animate(300)
        })
        // 点击焦点让对应的下标值的图片显示,重置下标值
        $("#btns span").click(function(){
            index = $(this).index();
            // $(".swiper-content img").eq(index).fadeIn().siblings().fadeOut()
            // $("#btns span").eq(index).addClass("current").siblings().removeClass("current")
            animate(300)
        })
        function animate(a) {
            $("#background").css("backgroundImage","url("+"../网易云首页/背景图/"+index+".jpg)")
            $("#abig img").eq(index).show().siblings().hide()
            $("#btns span").eq(index).css("backgroundPosition","-22px -350px").siblings().css("backgroundPosition","-3px -350px");
            
             
        }
        function play() {
                timer = setInterval(function () {
                    $("#next").click()
                }, 4000)
        }
        function stop() {
                clearInterval(timer)
        }
        $(".bigimg a").mouseenter(function(){
                stop();
        })
        $(".bigimg a").mouseleave(function(){
                play();
        })
        play();
        var ul1=0
        var ul2=650
        $(".gundongleft").click(function(){
            if(ul2<=-650){
                $(".ul2").animate({left:'650px'},1)
                ul2=650
            }
             if(ul1<=-650){
                 $(".ul1").animate({left:'650px'},1)
                 ul1=650
             }
            $(".gunimp").children(":first").animate({
                left:'-=650px'              
            },1000)
            ul1 -=650
            if(ul1<=-650){
                $(".ul1").animate({left:'650px'},1)
                ul1=650
            }         
            $(".gunimp").children(":last").animate({
                left:'-=650px'
            },1000)
            ul2 -=650
            if(ul2<=-650){
                $(".ul2").animate({left:'650px'},1)
                ul2=650
            }
            console.log(ul1)
            console.log(ul2)
        })
        $(".gundongright").click(function(){
            if(ul2>=650){
                $(".ul2").animate({left:'-650px'},1)
                ul2=-650
            }
            if(ul1>=650){
                $(".ul1").animate({left:'-650px'},1)
                ul1=-650
            }
            $(".gunimp").children(":first").animate({
                left:'+=650px'
            },1000)
            ul1 +=650
            if(ul1>=650){
                $(".ul1").animate({left:'-650px'},1)
                ul1=-650
            }
            $(".gunimp").children(":last").animate({
                left:'+=650px'
            },1000)
            if(ul2>=650){
                $(".ul2").animate({left:'-650px'},1)
                ul2=-650
            }
            ul2 +=650
            if(ul1>=650){
                $(".ul1").animate({left:'-650px'},1)
                ul1=-650
            }
            console.log(ul1)
            console.log(ul2)
            
        })
        $(".dd1 li").mouseenter(function(){
            $(this).children(":last").css("display","block");
            $(this).children('a').eq(0).css("width","90px")
        }).mouseleave(function(){
            $(this).children(":last").css("display","none");
            $(this).children('a').eq(0).css("width","180px")
        })
        $(window).scroll(function(){
            if($(window).scrollTop() >0){
                $("#fix").show()
            }else{
                $("#fix").hide()
            }
        });
        $("#fix").click(function(){
            $("html").animate({scrollTop:"0px"},1000)
        })
        
    })
</script>
</html>